<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>普通拖拽-面向对象</title>
		<script src="../js/jquery.3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			div {
				width: 200px;
				height: 200px;
				background: paleturquoise;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>

	<body>
		<div id="div1"></div>
	</body>
	<script type="text/javascript">
		function div(id) {
			this.Id = document.getElementById(id);
			this.TuoZhuai = function() {
				var mouseDivX, mouseDivY;
				this.Id.onmousedown = function(ev) {
					var event1 = event || ev;
					mouseDivX = event1.offsetX;
					mouseDivY = event1.offsetY;
					this.onmousemove = function(ev) {
						var event1 = event || ev;
						var mouseCX = event1.clientX;
						var mouseCy = event1.clientY;
						var chaX = mouseCX - mouseDivX;
						var chaY = mouseCy - mouseDivY;
						this.style.left = chaX + "px";
						this.style.top = chaY + "px";
					}
					this.onmouseup = function() {
						this.onmousemove = null;
					}
				}
			}
		}
		var div1 = new div("div1");
		div1.TuoZhuai();
	</script>

</html>